<template>
  <div class="monitor-wrap">
    <div
      class="monitor-box"
      v-loading="loading"
      element-loading-text="视频加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 1)"
    >
      <div v-if="videoSrc===''" class="no-video">暂未播放视频</div>
      <video-player
        v-else
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      ></video-player>
    </div>
    <div class="monitor-list">
      <div
        v-for="(item,index) in videoList"
        :key="index"
        class="monitor-item"
        @click="toPlay(item.rtmpurl)"
      >
        <div class="monitor-img">
          <img :src="item.imgPath" alt />
        </div>
        <span>{{item.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getMonitorData } from "@/api/monitor";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
import { videoPlayer } from "vue-video-player";
import "videojs-flash";
// import SWF_URL from "videojs-swf/dist/video-js.swf";

// videojs.options.flash.swf = SWF_URL; // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件
export default {
  name: "monitor",
  components: {
    videoPlayer
  },
  data() {
    return {
      videoSrc: "",
      playerOptions: {
        live: true,
        autoplay: true, // 如果true，浏览器准备好时开始播放
        muted: false, // 默认情况下将会消除任何音频
        loop: false, // 是否视频一结束就重新开始
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          currentTimeDisplay: true, // 当前时间
          volumeControl: false, // 声音控制键
          playToggle: false, // 暂停和播放键
          progressControl: false, // 进度条
          fullscreenToggle: true // 全屏按钮
        },
        techOrder: ["flash"], // 兼容顺序
        // flash: {
        //   hls: {
        //     withCredentials: false
        //   },
        //   swf: SWF_URL
        // },
        sources: [
          {
            type: "rtmp/flv",
            src: "" // 视频地址-改变它的值播放的视频会改变
          }
        ],
        notSupportedMessage: "此视频暂无法播放，请稍后再试" // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
      videoList: [],
      loading: false
    };
  },
  created() {
    this._getMonitorData();
  },
  watch: {
    $route() {
      this.$destroy("videoPlayer");
    }
  },
  methods: {
    destoryHandle() {},
    _getMonitorData() {
      getMonitorData().then(res => {
        console.log("视频监控res", res);
        if (res.code == 1) {
          this.videoList = res.data.list;
          console.log("视频监控列表", this.videoList);
          this.videoSrc = this.videoList[0].rtmpurl;
          this.playerOptions.sources[0].src = this.videoList[0].rtmpurl;
        }
      });
    },
    toPlay(url) {
      console.log(url);
      this.videoSrc = url;
      this.playerOptions.sources[0].src = url;
      // this.loading = true;
    }
  }
};
</script>
<style lang="scss">
.monitor-wrap {
  .monitor-box {
    .video-player {
      .vjs_video_1-dimensions.vjs-fluid {
        height: 100%;
        padding: 0;
      }
    }
  }
  .video-js.vjs-fluid,
  .video-js.vjs-16-9,
  .video-js.vjs-4-3 {
    height: 100%;
    padding-top: 0 !important;
  }
}
</style>
<style lang='scss' scoped>
.monitor-wrap {
  width: 100%;
  height: 100%;
  padding: 20px;
  margin: 0 auto;
  overflow: auto;
  .monitor-box {
    background: #000;
    height: 500px;
    .no-video {
      color: #fff;
      line-height: 500px;
      text-align: center;
    }
    .video-player {
      height: 100%;
      position: relative;
      .vjs_video_1-dimensions.vjs-fluid {
        padding: 0;
      }
    }
  }
  .monitor-list {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .monitor-item {
      width: 21%;
      margin: 5px 0;
      text-align: center;
      cursor: pointer;
      .monitor-img {
        width: 100%;
        height: 130px;
        background: #ccc;
        img {
          width: 100%;
          height: 100%;
        }
      }
      span {
        display: block;
        padding-top: 10px;
      }
    }
  }
}
</style>